<template>
	<zui-box>
		<!-- 头部导航 -->
		<zui-navbar title="个人信息"></zui-navbar>

		<u-gap height="20rpx"></u-gap>
		<!-- //平面盒子 -->
		<zui-flat>
			<u-gap height="40rpx"></u-gap>
			<view class="up_img"><zui-upload :image="avatar"></zui-upload></view>
			<u-gap height="20rpx"></u-gap>
			<view class="sm_title">更换头像</view>
			<u-gap height="40rpx"></u-gap>
		</zui-flat>

		<u-gap height="20rpx"></u-gap>
		<!-- 单元格菜单 -->
		<view class="cell_list" @click="xz_go('set_name')">
			<u-cell-group :border="false"><u-cell :border="false" isLink title="昵称" :value="nickname"></u-cell></u-cell-group>
		</view>
		<u-gap height="276rpx"></u-gap>

		<zui-button bgColor="#AA334F" @fun="save">保存</zui-button>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			fileList6: [],
			avatar: '',
			nickname: ''
		};
	},
	onLoad() {
		this.get_info();
	},
	onShow() {
		uni.$on('upimg', data => {
			if (data.code == 1) {
				this.updateAvatar(data.data);
			}
		});
	},
	methods: {
		save() {
			this.xz_back();
		},
		get_info() {
			uni.$u.http
				.get('/app/user/getUserInfo', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					this.avatar = res.avatar;
					this.nickname = res.nickname;
				})
				.catch(err => {});
		},
		updateAvatar(avatar) {
			uni.$u.http
				.post('/app/user/updateAvatar', { avatar }, { custom: { auth: true, toast: true, catch: true } })
				.then(res => {
					uni.$u.toast('修改成功');
					this.avatar = `${this.httpPath}${avatar}`;
					// setTimeout(()=>{
					// 	uni.navigateBack()
					// },1000)
				})
				.catch(err => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.up_img {
	border-radius: 50%;
	overflow: hidden;
	width: 180rpx;
	height: 180rpx;
	margin: 0 auto;
}

.sm_title {
	color: #ffe5a5;
	font-size: 26rpx;
	text-align: center;
}

/* 	//底部按钮组 */
.cell_list {
	padding: 0 30rpx;
	box-sizing: border-box;
	margin: 0 auto;

	/deep/.u-cell__title-text {
		color: #333333 !important;
		font-size: 28rpx;
	}
	/deep/.u-cell__left-icon-wrap {
		margin-right: 20rpx;
	}
	/deep/.u-cell--clickable {
		background: #fff;
	}
	/deep/.u-cell {
		background: #fff;
		border-radius: 20rpx;
	}
	/deep/.u-cell__value {
		color: #bfbfbf !important;
	}
}
</style>
